Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Text Search form and query creation to workspaces #272

Closed
wants to merge 1 commit into from

Conversation

bdeining
Copy link
Contributor

@bdeining bdeining commented Mar 4, 2020

Adds Text Search form creation to workspace view and implements search and save buttons. This is a somewhat interim PR in that the inital creation view will be updated to include basic / advanced / custom, but this is a good starting point. Could use feedback on the form style.
Screen Shot 2020-03-04 at 9 25 10 AM
Screen Shot 2020-03-04 at 9 25 01 AM
Screen Shot 2020-03-04 at 9 24 44 AM
Screen Shot 2020-03-04 at 9 24 39 AM

tied to #244

@Bdthomson
Copy link
Contributor

Save/Search buttons should have margin/spacing between them

Copy link
Contributor

@Bdthomson Bdthomson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you run the formatter on this?

Comment on lines +104 to +115
onCompleted: data => {
save({
variables: {
id: workspaceId,
attributes: {
queries: [data.createMetacard.id],
metacard_type: 'workspace',
},
},
refetchQueries: ['WorkspaceById'],
}),
setQueryId(data.createMetacard.id)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You probably want to wait to set the query id until after it's been added to the workspace.

Suggested change
onCompleted: data => {
save({
variables: {
id: workspaceId,
attributes: {
queries: [data.createMetacard.id],
metacard_type: 'workspace',
},
},
refetchQueries: ['WorkspaceById'],
}),
setQueryId(data.createMetacard.id)
onCompleted: async data => {
await save({
variables: {
id: workspaceId,
attributes: {
queries: [data.createMetacard.id],
metacard_type: 'workspace',
},
},
refetchQueries: ['WorkspaceById'],
}),
setQueryId(data.createMetacard.id)

},
})
} catch (err) {
//eslint-disable-next-line
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I'm not mistaken, console logs get stripped when the build is ran in production mode, so if that's the case you guys should remove the eslint no-console rule so you don't have to add these comments everywhere.

Copy link
Contributor

@willwill96 willwill96 Mar 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's nice to have these explicitly ignored because some people use console logs to debug and we don't have a strict review process, so I worry random console logs would get in

Comment on lines +164 to +165
const onClickSearch = async () => {
await onCreate(true)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't have to wait anymore because nothing is happening afterwards.

Suggested change
const onClickSearch = async () => {
await onCreate(true)
const onClickSearch = () => {
onCreate(true)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also looks like you don't need the true argument because onCreate doesn't take any arguments

@@ -123,9 +123,9 @@ const typeDefs = `
createMetacard(attrs: MetacardAttributesInput!): MetacardAttributes
saveMetacard(id: ID!, attributes: MetacardAttributesInput!): MetacardAttributes

# TBD: Should only be used when...
# TBD: Should only be used when updating assocations with IDs
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# TBD: Should only be used when updating assocations with IDs
# Should only be used when updating associations with IDs or other expanded fields (i.e. lists, queries) where you need to set raw values but the schema would otherwise not allow you.

@@ -5,9 +5,13 @@ import Tab from '@material-ui/core/Tab'
import Tabs from '@material-ui/core/Tabs'
import Typography from '@material-ui/core/Typography'
import gql from 'graphql-tag'
Copy link
Contributor

@willwill96 willwill96 Mar 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should break the workspaces (index cards) routes and the workspace route into two different files. This one is getting too big now and it's hard to see the separation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, though it might be best as a separate issue to manage the scope of these changes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fair. I think it would be a good idea to prioritize this before adding more functionality to workspaces going forward

variables: {
attrs: {
title: title,
cql: cql,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should be storing the filterTree and not the cql

}
}
},
[queryIdToRun, data, onSearch]
Copy link
Contributor

@willwill96 willwill96 Mar 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like only queryIdToRun needs to be in this array

value: textValue,
}

const cql = transformFilterToCQL(filter)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't have cql anywhere on the frontend. graphql should be responsible for any conversions

Comment on lines +104 to +105
onCompleted: data => {
save({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be using the update option instead and writing to the apollo cache to avoid the need to add refetchQueries

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

refetchQueries is a nice to thing have when you can use it. Normally in our system we can't because our data is stored in SOLR and with soft commit times, a refetchQueries would normally just return old data. However, when you query by id, solr is guaranteed to give you up to date data. In this specific case, the refetchQueries he's running is on a workspaceById query which means it will be fine.

I am of the opinion that if you don't have to write this goofy/complicated cache updating logic, you shouldn't have to.

`

const useCreateQuery = workspaceId => {
const [queryId, setQueryId] = React.useState('')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useCreateQuery shouldn't need to know about the queryId

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I follow. The query ID is needed when the workspace is updated on line 105. It's also used to execute the useEffect in the case that the user hit Search after creating the query itself.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useCreateQuery having access to the queryId feels like a code smell to me. I think the logic of associating a query to a workspace should be handled by the graphql side

import { getIn } from 'immutable'
import React, { useState } from 'react'
import loadable from 'react-loadable'
import SaveAltIcon from '@material-ui/icons/SaveAlt'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you choose to use this icon instead of the ordinary Save (floppy disc) icon? Maybe it's just me, but this icon makes me think that something is going to be downloaded, not saved when I see it

@bdeining bdeining closed this Mar 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants